<template>
  <div style="overflow-x:hidden">
    <el-card class="box-card" style="width:40%;margin:0px 3%;display:inline-block">
      <div slot="header" class="clearfix">
        <span style="font-size:16px">总交易金额</span>
      </div>
      <div style="font-size:20px;width:100%;text-align:center">
        ￥{{merchantModel.totalAmount?merchantModel.totalAmount:0}}
      </div>
      <span ></span>
      <el-form label-width="100px">
          <el-form-item label="余额">
            <span>￥{{merchantModel.balanceAmount?merchantModel.balanceAmount:0}}</span>
          </el-form-item>
          <el-form-item label="今日成交额">
            <span>
              ￥{{merchantModel.todayAmount}}

            </span>
          </el-form-item>
        </el-form>
    </el-card>

    <el-card class="box-card" style="width:40%;margin:0px 3%;display:inline-block">
      <div slot="header" class="clearfix">
        <span style="font-size:16px">总退款金额</span>
      </div>
      <div style="font-size:20px;width:100%;text-align:center">
        ￥{{merchantModel.refundAmount?merchantModel.refundAmount:0}}
      </div>
        <el-form label-width="100px">
          <el-form-item label="退款总数">
            <span>{{merchantModel.refundNum?merchantModel.refundNum:0}}</span>
          </el-form-item>
          <el-form-item label="最后退款金额">
            <span>￥{{merchantModel.lastRefundAmount?merchantModel.lastRefundAmount:0}}</span>
          </el-form-item>
        </el-form>
    </el-card>

    <div style="width:100%;text-align:left;margin-top:20px;margin-left:3%">
      <div style="font-size:16px;">交易走势</div>
      <div style="overflow:hidden;height:200px">
        <schart
          style="margin-top:-30px"
          :canvasId="canvasId"
          :type="type"
          :width='width'
          :height="height"
          :data="data"
          :options="options">
        </schart>
      </div>
    </div>

    <div :style="'width:'+width+'px;margin-left:3%;'">
    <div style="font-size:16px;">交易记录</div>
      <el-table :data="transactionListTable" style="width:100%;margin-top:10px;">
              <el-table-column prop="name" label="订单号">
          <template scope="scope">
            <span >{{scope.row.orderId}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="类型">
          <template scope="scope">
            <span v-if="scope.row.transactionType=='PAY'">收入</span>
            <span v-if="scope.row.transactionType=='REFUND'">退款</span>
          </template>
        </el-table-column>
        <el-table-column  prop="name" label="金额">
          <template scope="scope">
            <span v-if="scope.row.transactionType=='PAY'" style="color:green">+{{ scope.row.money}}</span>
            <span v-if="scope.row.transactionType=='REFUND'" style="color:red">-{{ scope.row.money}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="时间">
          <template scope="scope">
            <span>{{ scope.row.updateTime}}</span>
          </template>
        </el-table-column>
           <el-table-column label="操作" width="300">
        <template scope="scope">
          <el-button size="small" @click="$router.push({path:'/orderindex',query:{orderId:scope.row.orderId}})">查看订单</el-button>
        </template>
      </el-table-column>

      </el-table>
         <div class="block" align="right">
                    <br>
                    <el-pagination @current-change="handleCurrentChange" layout=" prev, pager, next" :total="count">
                    </el-pagination>
                </div>
    </div>
  </div>
</template>

<script>
import * as Api from "@/api/Api.js";
import * as RoundApi from "@/api/RoundApi.js";
import * as Config from "@/api/Config.js";
import Schart from "vue-schart";

export default {
  data() {
    return {
       pageIndex: 1,
       count: 0,
       merchantModel: {
        balanceAmount: 0,
        totalAmount: 0,
        refundAmount: 0,
        lastRefundAmount: 0,
        refundNum: 0
      },
      transactionListTable: [],
      canvasId: "myCanvas",
      type: "line",
      width: 800,
      height: 250,
      data: [
        { name: "1", value: 1342 },
        { name: "2", value: 4123 },
        { name: "3", value: 1654 },
        { name: "4", value: 1795 },
        { name: "5", value: 1795 },
        { name: "6", value: 1795 },
      ],
      options: {
        title: ""
      }
    };
  },

  methods: {
        handleCurrentChange(val) {
      console.log(val);
      this.pageIndex = val;
      this.transactionList();
    },
    transactionList() {
            //分页 2个参数
      let pageSize = 10; //每页显示多少条记录。
      let pageIndex = this.pageIndex-1; //第几页.

      RoundApi.transactionList(this,{
        page:pageIndex,
        pageSize:pageSize
      }).then(res => {
        if (res.retCode) {
          console.log("消费列表", res);
          this.transactionListTable = res.data.transactionLogList;
          this.count = res.data.page.total
        }
      });
   
    },
    getOtherList(){
         RoundApi.getAccount(this).then(res => {
        if (res.retCode) {
          console.log("商户账户", res);
          this.merchantModel = res.data;
        }
      });
      RoundApi.getTrend(this).then(res => {
        if (res.retCode) {
          console.log("商户收入走势", res);
          this.data = res.data;
        }
      });
    }
  },
  mounted() {
    this.transactionList();
    this.getOtherList();
    this.width=(window.innerWidth-220)*0.85;
    window.onresize=()=>{
      this.width=(window.innerWidth-220)*0.85;
    }
  },
  components: {
    Schart
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
